<template>
  <view>
    <public-module></public-module>
    <wlk-navbar title="充值记录" navbarType='3'></wlk-navbar>
    <block v-if="loadStatus=='nomore' && list.length==0">
      <view class="not-data">
        <u-empty
            :icon="uEmpty.search"
            text="没有搜索结果"
        >
        </u-empty>
      </view>
    </block>
    <block v-else>
      <view class="list pd30">
        <view class="item wd100 bgw pd30 mb20 br04 wlkflex justify-between" v-for="(item,index) in list" :key="item.id">
          <view>
            <view class="title">{{item.pay_type_text}}</view>
            <view class="mt10 col9">{{$u.timeFormat(item.createtime,'yyyy-mm-dd hh:MM:ss')}}</view>
          </view>
            <view>
                <view class="money">+{{item.money}}</view>
                <view class="mt10 desc col9">￥{{item.total_fee }}</view>
            </view>
        </view>
        <view class="load-more">
          <u-loadmore :status="loadStatus" :loading-text="loadingText"  :loadmore-text="loadmoreText" :nomore-text="nomoreText" dashed  line />
        </view>
      </view>
    </block>

  </view>


</template>

<script>
var _self;
import { mapGetters } from 'vuex';
	export default {
        computed: {
          ...mapGetters(['themeColor','uEmpty'])
        },
	    	data() {
	    		return {
            list:[],
            current:0,
            page: 1,
            loadStatus:'loading',
            loadingText: '努力加载中',
            loadmoreText: '轻轻上拉',
            nomoreText: '实在没有了',
	    		};
	    	},
        onLoad(options) {
          _self = this;
        },
        onShow() {
          _self.loadStatus = 'loading';
          _self.page = 1;
          _self.list = [];
          _self.getData();
        },
        onReachBottom() {
          if(this.loadStatus == "nomore"){
            return;
          }
          this.page++;
          this.getData();
        },
        methods: {
          async getData() {
            const res = await uni.$u.http.post("recharge/getList", {
              page: this.page,
            });
            if (res && res.data && res.data.rows) {
              this.list = this.list.concat(res.data.rows);
            }
            this.loadStatus = res.data.rows.length < res.data.limit ? 'nomore' : 'loadmore';
          }
        }
	};
</script>

<style lang="scss">
    .list{
        font-size: $font-base;
        .item{
            .title{
                font-size: $font-lg;
            }
            .money{
                font-size: $font-lg;
                color: $-tour-price-color;
            }
            .desc{
                text-align: right;
            }
        }
    }

</style>
